<template>
	<view class="post">
		<app-title :title='title'></app-title>
		<view class="form">
			<view class="list">
				<view class="label" style="width: 20%;">收货人</view>
				<input class="input_text" style="width: 70%;" type="text" @input="realname" placeholder="请填写收货人姓名"
					:value="res.realname" />
			</view>
			<view class="list">
				<view class="label" style="width: 20%;">联系电话</view>
				<input style="width: 70%;" class="input_text" type="text" @input="mobile" placeholder="请填写联系电话"
					:value="res.mobile" />
			</view>
			<view class="list" style="align-items: center;">
				<view class="label" style="width: 20%;">所在地区</view>
				<button style="width: 70%;background: #fff;"
					:style="address === '-请选择地区-'?'color:#767676;':'color:#333'" class="button" type="default"
					@click="showMulLinkageThreePicker" v-cloak>{{address}}</button>
			</view>
			<view class="list">
				<view class="label" style="width: 20%;">所在街道</view>
				<input style="width: 70%;" class="input_text" type="text" @input="street" placeholder="所在街道"
					:value="res.street" />
			</view>
			<view class="list">
				<view class="label" style="width: 20%;">详细地址</view>
				<input style="width: 70%;" class="input_text" type="text" @input="addr" placeholder="街道,楼牌号等"
					:value="res.address" />
			</view>
		</view>
		<view class="sub">
			<view class="btn" type="primary" @click="sub">保存地址</view>
		</view>





		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength"
			:pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" @onCancel="onCancel"
			:pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>
<script>
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../../common/city.data.js';
	import city from '../../../components/mpvue-citypicker/city-data/city.js';
	import area from '../../../components/mpvue-citypicker/city-data/area.js';
	import province from '../../../components/mpvue-citypicker/city-data/province.js';
	import asd from '../../../components/mpvue-citypicker/city-data/asd.js';

	import {
		member_address_submit,
		member_address_post
	} from '@/api/member.js'
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {

			return {
				res: [],
				mulLinkageTwoPicker: cityData,
				city: city,
				area: area,
				asd: asd,
				province: province,
				cityPickerValueDefault: [0, 0, 0],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray: [],
				address: '-请选择地区-',
				datavalue: '',
				submit: {},
				openid: '',
				title: '添加地址'
			};
		},
		onLoad: function(e) {
			this.goodsid = e.goodsid;
			this.optionid = e.optionid;
			this.total = e.total;
			if (e.id != 'undefined' && e.id != undefined) {
				uni.showLoading()
				this.title = '编辑地址';
				this.id = e.id
				uni.getStorage({
					key: 'openid',
					success: (res) => {
						this.openid = res.data
						this.setAjax()
					},
					fail: () => {
						uni.navigateTo({
							url: '../../login/login'
						});
					}
				});
			} else {
				uni.getStorage({
					key: 'openid',
					success: (res) => {
						this.openid = res.data
					}
				});
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async setAjax() {
				let up = {
					id: this.id,
					openid: this.openid
				}
				let res = await member_address_post(up);
				console.log(res);
				this.res = res;
				this.address = this.res.province + '-' + this.res.city + '-' + this.res.area;
				this.submit.realname = res.realname;
				this.submit.mobile = res.mobile;
				this.submit.address = res.address;
				this.submit.areas = res.province + ' ' + res.city + ' ' + res.area;
				this.submit.street = res.street;
				this.submit.datavalue = res.datavalue;
			},
			onCancel(e) {},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.address = e.label
				var pro = e.value[0]
				var city = e.value[1]
				var area = e.cityCode
				this.submit.datavalue = this.province[pro].value + '0000 ' + this.city[pro][city].value + '00 ' + area
				var a = e.label.split("-")
				a = a[0] + ' ' + a[1] + ' ' + a[2]
				this.submit.areas = a
			},
			async sub() {
				var id = ''
				if (this.id != undefined) {
					id = '&id=' + this.id
				}
				if (this.submit.realname == undefined) {
					uni.showToast({
						title: '请输入收货人',
						icon: "none"
					});
				} else if (this.submit.mobile == undefined) {
					uni.showToast({
						title: '请输入联系电话',
						icon: "none"
					});
				} else if (this.submit.address == undefined) {
					uni.showToast({
						title: '请选择城市',
						icon: "none"
					});
				} else if (this.submit.areas == undefined) {
					uni.showToast({
						title: '请输入街道',
						icon: "none"
					});
				} else if (this.submit.street == undefined) {
					uni.showToast({
						title: '请输入街道',
						icon: "none"
					});
				} else {
					uni.showLoading()
					let up = {
						"id": this.id,
						'openid': this.openid,
						'addressdata[realname]': this.submit.realname,
						'addressdata[mobile]': this.submit.mobile,
						'addressdata[address]': this.submit.address,
						'addressdata[areas]': this.submit.areas,
						'addressdata[street]': this.submit.street,
						'addressdata[datavalue]': this.submit.datavalue
					}
					let res = await member_address_submit(up);
					console.log(res);
					if (res.result.addressid !== undefined) {
						uni.showToast({
							title: '保存成功'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					} else {
						uni.showToast({
							title: '请求有误'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
				}
			},
			realname(e) {
				this.submit.realname = e.detail.value
			},
			mobile(e) {
				this.submit.mobile = e.detail.value
			},
			addr(e) {
				this.submit.address = e.detail.value
			},
			street(e) {
				this.submit.street = e.detail.value

			}
		},
		onBackPress() {
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel();
				return true;
			}
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		onUnload() {
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel()
			}
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #8D84FF;
	}

	.list {
		padding: 24upx;
		background: #fff;
		position: relative;
		display: flex;
		font-size: 26rpx;

		.input_text {
			color: #333;
			font-size: 26rpx;
		}
	}

	.list .label {
		width: 154upx;
		color: #666;
	}

	.list:before {
		content: " ";
		position: absolute;
		left: 20upx;
		right: 20upx;
		bottom: -2upx;
		height: 2upx;
		border-top: 2upx solid #ebebeb;
		color: #D9D9D9;
		-webkit-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(0.5);
		-ms-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.button {
		background: #fff;
		font-size: 28upx;
		margin: 0;
		padding: 0;
		line-height: 52upx;
		width: 100%;
		text-align: left;
	}

	.button.button-hover {
		background: #fff;
	}

	.button:after {
		display: none;
	}

	.sub {
		width: 100%;
		padding: 50upx;
		position: fixed;
		bottom: 50rpx;

		.btn {
			width: 100%;
			height: 70rpx;
			border-radius: 70rpx;
			background: linear-gradient(3deg, #ff3232, #ff3232, #ff8719);
			text-align: center;
			line-height: 70rpx;
			color: #fff;
		}
	}
</style>